<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ufun</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link rel="stylesheet" type="text/css" href="../Common/css/ufun.css" />
		<script src="../Common/js/tools.js"></script>
		<script src="../Common/js/status-bar.js"></script>
		<script src="../Common/js/jump.js"></script>
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link rel="stylesheet" href="../../Common/css/lib/materialize.min.css">
		<style>
			html {
				background-color: var(--color-white)!important;
			}
			#NavBar {
				position: fixed;
				bottom: 0px;
				height: 54px;
				width: 100%;
				padding: 0;
				border-top: 1px solid var(--color-gray-light);
				background-color: transparent;
				z-index: 99;
				
			}
			.tab-item {
				display: block;
				position: relative;
				float: left;
				margin: 0;
				padding: 0;
				height: 100%;
				width: 20%;
				text-align: center;
				background-color: transparent;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: contain;
				transition: background-image 100ms;
			}
			#Question {
				background-image: url('img/question-0.png');
			}
			#Question.active {
				background-image: url('img/question-1.png');	
			}
			#Lecture {
				background-image: url('img/lecture-0.png');
			}
			#Lecture.active {
				background-image: url('img/lecture-1.png');	
			}
			#Plus {
				background-image: url('img/plus.png');
			}
			#Message {
				background-image: url('img/message-0.png');
			}
			#Message.active {
				background-image: url('img/message-1.png');	
			}
			#Mine {
				background-image: url('img/mine-0.png');
			}
			#Mine.active {
				background-image: url('img/mine-1.png');
			}
			#NewMsgRed {
				display: none;
				position: absolute;
				border-radius: 100%;
				background-color: red;
				width: 3vw;
				height: 3vw;
				right: 5vw;
				top: 2vw;
			}
		</style>
	</head>
	<body>
		<!-- <header> -->
		<!-- 背景铺垫 -->
		<!-- </header> -->
		<div class="mui-content">
			<!-- (nav) 导航栏
					此处使用了可扩展性很强的设计，
					只要保证下方的a标签id、subPages、buttonImgs三者一一对应，
					则导航栏可以随意进行扩展。
			-->
			<nav id="NavBar">
				<div class="tab-item" id="Question"></div>
				<div class="tab-item" id="Lecture"></div>
				<div class="tab-item" id="Plus"></div>
				<div class="tab-item" id="Message">
					<div id="NewMsgRed"></div>
				</div>
				<div class="tab-item" id="Mine"></div>
			</nav>
			<!-- (nav) 导航栏结束 -->
		</div>
	</body>
	<script type="text/javascript">
		var userHash;
		//页面列表
		var subPages = {
			'Question': '../Question/question-list.html',
			'Lecture': '../Lecture/lecture-list.html',
			'Plus': 'pop-window.html',
			'Message': '../Message/message-list.html',
			'Mine': '../Mine/personal-center/index.html'
		};
		//默认页面
		var defaultPage = 'Question';
		//选项卡按钮不同状态下的图片
		var buttonImgs = {
			'Question': ['img/question-0.png', 'img/question-1.png'],
			'Lecture': ['img/lecture-0.png', 'img/lecture-1.png'],
			'Plus': ['img/plus.png', 'img/plus.png'],
			'Message': ['img/message-0.png', 'img/message-1.png'],
			'Mine': ['img/mine-0.png', 'img/mine-1.png']
		};

		document.addEventListener('plusready', function() {
			DoWait();
			GetStatusTop();
			plus.key.addEventListener('backbutton', function() {
				MyBeforeBack();
				return false;
			});
			setInterval(GetStatusTop(), 1000, true);
			userHash = plus.storage.getItem("userHash");
			//动态渲染选项卡按键
			var items = document.getElementsByClassName("tab-item");
			for (let i = 0; i < items.length; ++i) {
				items[i].classList.add('waves-effect');
				items[i].onclick = function(e) {
					clickButton(items[i]);
				};
			}
			// 默认页面
			openSubPage(ID(defaultPage));
			// 启动新消息轮询
			getNewMsg();
			DontWait();
		});

		//-------------------------------
		//  选项卡、subPages相关
		//-------------------------------
		function clickButton(now) {
			var last = document.getElementsByClassName("active")[0];
			closePopWindow();
			// 无效点击
			if (now == last) {
				return;
			}
			// 特殊按键点击
			if (now.id == 'Plus') {
				openPopWindow();
				return;
			}
			// 更新子页面
			try {
				openSubPage(now, last);
			} catch (e) {}
		}

		function openSubPage(now, last) {
			now.classList.add('active');
			// 打开页面
			let cache = plus.webview.getWebviewById(now.id);
			if (cache == null) {
				cache = OpenWebView(subPages[now.id], now.id, {
					top: WVTop() + 'px',
					bottom: '55px',
					background: 'transparent'
				}, {}, true);
				try {
					cache.evalJS(
						`document.addEventListener('plusready', () => {
							plus.key.addEventListener('backbutton', function() {
								MyBeforeBack();
								return false;
							});
						});`
					);
				} catch(e) {}
			} else {
				cache.show('none', 0);
			}
			if (last) {
				last.classList.remove('active');
				setTimeout(() => {
					if (now === document.getElementsByClassName("active")[0])
						plus.webview.getWebviewById(last.id).hide('none', 0);
				}, 1000);
			}
			// 监视当前webview数量
			console.log((() => {
				let str = "";
				let wvs = plus.webview.all();
				for (let i in wvs) {
					str += wvs[i].id + ', ';
				}
				return str;
			})());
		}

		//-------------------------------
		//  PopWindow相关
		//-------------------------------
		function openPopWindow() {
			if (plus.webview.getWebviewById('PopWindow') != null)
				return;
			OpenWebView(subPages['Plus'], 'PopWindow', {
				top: '0px',
				bottom: '55px',
				background: 'transparent'
			});
		}

		function closePopWindow() {
			if (plus.webview.getWebviewById('PopWindow') != null) {
				plus.webview.getWebviewById('PopWindow').close();
			}
		}

		//-------------------------------
		//  检测新消息（小红点）
		//-------------------------------
		function getNewMsg() {
			(function() {
				CallAJAX("ask4NewMsg", {
					"userHash": userHash
				}, function(data) {
					if (data["res"] != "ok")
						return;
					if (data["num"] == 0) {
						document.getElementById("NewMsgRed").style.display = "none";
					} else {
						document.getElementById("NewMsgRed").style.display = "block";
					}
				}, function() {
					// Do Nothing When Failed.
				});
				setTimeout(arguments.callee, 5000);
			})();
		}
	</script>
</html>
